<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<myheader :leftType="2" leftUrl="/pages/my/groupList" :noLeft="false" showTitle="创建新群组"
			showBackground="#EAECEF">
		</myheader>
		<!-- #endif -->
		<view class="content">
			<view style="margin-top: 10px;border-radius: 10px;padding: 15px;background-color: white;">
				<view style="color: #2E4964;font-size: 16px;font-weight: 700;">群组服务说明:</view>
				<view style="font-size: 14px;color: #2E4964;font-weight: 400;margin-top: 10px;">
					适宜于家庭备餐、朋友聚餐时，按所有人已订阅的健康膳食方案，提供推荐适宜饮食推荐的服务模式。
				</view>
				<view style="font-size: 14px;color: #2E4964;font-weight: 400;margin-top: 10px;">
					并可根据群成员健康体态档案情况，提供精准适宜饮食推荐服务。
				</view>
				<view style="font-size: 14px;color: #2E4964;font-weight: 400;margin-top: 10px;">
					你可为家庭、或朋友创建专属群组。 也可加入其他人所创建的群组。
				</view>
			</view>
			<view style="margin-top: 10px;border-radius: 10px;padding: 15px;background-color: white;">
				<view style="color: #2E4964;font-size: 16px;font-weight: 700;">群组名称,必填</view>
				<view style="margin-top: 10px;">
					<uni-easyinput v-model="groupInfo.name" placeholder="请输入群名称" style="height: 59px;"></uni-easyinput>
				</view>
				<view style="margin-top: 10px;font-size: 14px;color: #8292A2;font-size: 400;">长度限15个字</view>
			</view>
			<!-- <view style="margin-top: 20px;border-radius: 10px;padding: 15px;background-color: white;">
				<view style="color: #2E4964;font-size: 16px;font-weight: 700;">描述</view>
				<view style="margin-top: 10px;">
					<uni-easyinput v-model="groupInfo.des" type="textarea"></uni-easyinput>
				</view>
				<view style="margin-top: 10px;font-size: 14px;color: #8292A2;font-size: 350;">不能超过100个字</view>
			</view> -->
			<view style="margin-top: 20px;border-radius: 10px;padding: 15px;background-color: white;">
				<view style="color: #2E4964;font-size: 16px;font-weight: 700;">入群邀请有效期,必填</view>
				<view style="margin-top: 10px;">
					<view v-for="item in timeOptionList" :class="(groupInfo.effectiveTime==item.num&&groupInfo.timeType==item.timeType)?'timeCardSelect':'timeCard'" @click="setTime(item)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="createbox" style="display: flex;justify-content: center;align-items: center;"
				@click="save()">
				<view style="text-align: center;">
					<view style="font-size: 20px;font-weight: 700;">保存群组</view>
				</view>
			</view>
			<view style="height: 100px;"></view>
		</view>
		<!-- <mytabbar :active="3" :count="0"></mytabbar> -->
	</view>
</template>

<script>
	import mytabbar from '../../components/my-tabbar/index.vue';
	import myheader from '../../components/header/index.vue';
	export default {
		components: {
			mytabbar,
			myheader
		},
		data() {
			return {
				groupInfo: {
					"id": null,
					"name": null,
					"effectiveTime": null,
					"timeType": null,
					"des": null,
					"createUser": null,
				},
				timeOptionList: [{
						"name": "30分钟",
						"num": 30,
						"timeType": 0 //分钟
					},
					{
						"name": "3个小时",
						"num": 3,
						"timeType": 1 //小时
					},
					{
						"name": "1天",
						"num": 1,
						"timeType": 2 //天
					},
					{
						"name": "3天",
						"num": 3,
						"timeType": 2 //天
					},
					{
						"name": "10天",
						"num": 10,
						"timeType": 2 //天
					},
					{
						"name": "30天",
						"num": 30,
						"timeType": 2 //天
					},
					{
						"name": "永久",
						"num": 9999,
						"timeType": 3 //天
					}
				]
			}
		},
		methods: {
			setTime(item){
				this.groupInfo.effectiveTime=item.num;
				this.groupInfo.timeType=item.timeType;
				this.$forceUpdate();
			},
			save(){
				if(this.groupInfo.name==null||this.groupInfo.name.trim()==""||this.groupInfo.name.length>15){
					uni.showToast({
						title: "请正确输入组名",
						icon: "none"
					});
					return;
				}
				if(this.groupInfo.effectiveTime==null||this.groupInfo.timeType==null){
					uni.showToast({
						title: "请选择入群邀请有效期",
						icon: "none"
					});
					return;
				}
				if(this.groupInfo.des!=null&&this.groupInfo.des.length>100){
					uni.showToast({
						title: "群描述不能超过100个字",
						icon: "none"
					});
					return;
				}
				let data={
					"name":this.groupInfo.name,
					"effectiveTime":this.groupInfo.effectiveTime,
					"timeType":this.groupInfo.timeType,
					"des":this.groupInfo.des,
				}
				uni.showLoading({
					title: '正在保存中...',
					mask: true
				});
				this.$H.put("portal/group/group", data).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						uni.showToast({
							title: "保存成功",
							icon: "none"
						})
						uni.navigateBack();
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				});
			},
		}
	}
</script>

<style>
	.content {
		padding: 0rpx 20rpx 0rpx 20rpx;
	}

	.timeCard {
		display: inline-block;
		font-size: 16px;
		font-weight: 700;
		padding: 10px 20px 10px 20px;
		border-radius: 10px;
		background-color: white;
		border: 1px solid #EAECEF;
		color: #1ABC9C;
		margin-right: 5px;
		margin-top: 5px;
	}
	.timeCardSelect{
		display: inline-block;
		font-size: 16px;
		font-weight: 700;
		padding: 10px 20px 10px 20px;
		border-radius: 10px;
		background-color: #1ABC9C;
		border: 1px solid #EAECEF;
		color: white;
		margin-right: 5px;
		margin-top: 5px;
	}
	.createbox {
		margin-top: 15px;
		height: 60px;
		border-radius: 10px;
		background-color: #1ABC9C;
		color: white;
		font-size: 16px;
		font-weight: 700;
	}
</style>